<template>
  <div class="city">
    <Header goback="true" :headerTitle="currentcityName">
      <span class="switch-city" slot="switchCity" @click="switchCity"
        >切换城市</span
      >
    </Header>
    <div class="city-content paddingTop">
      <div class="search">
        <el-input
          v-model="searchContent"
          placeholder="请输入内容"
          class="search-content"
          @input="toNewSearchCity(currentId, searchContent)"
        ></el-input>
        <el-button
          class="search-submit"
          @click="tosearchCity(currentId, searchContent)"
          v-on:keyup.enter="tosearchCity(currentId, searchContent)"
          >提交</el-button
        >
      </div>
      <div class="history-address" v-if="isHistory">
        <p class="history-title">搜索历史</p>
        <div class="history-list">
          <ul>
            <li
              v-for="item in historyList"
              :key="item.id"
              @click="toMsite(item)"
            >
              <p class="city-name">{{ item.name }}</p>
              <p class="city-detail">{{ item.address }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="isSearch">
        <div class="search-address" v-if="isSearchResult">
          <div class="search-list">
            <ul>
              <li
                v-for="item in searchList"
                :key="item.id"
                @click="toMsite(item)"
              >
                <p class="city-name">{{ item.name }}</p>
                <p class="city-detail">{{ item.address }}</p>
              </li>
            </ul>
          </div>
        </div>
        <div v-if="!isSearchResult">
          <p>很抱歉，没有搜索结果</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "Components/header/header";
import { currentcity, searchplace } from "@/service/getData";
import {
  imageStabilization,
  throttle,
  setStore,
  getStore,
} from "@/config/utils";
export default {
  data() {
    return {
      currentcityName: "",
      currentId: "",
      searchContent: "",
      historyList: "",
      searchList: "",
      isHistory: false,
      isSearchResult: false,
      isSearch: false,
    };
  },
  components: { Header },
  mounted() {
    console.log();
    //获取历史搜索记录
    this.currentId = this.$route.query.id;
    var historyCity = getStore("historycity");
    if (historyCity) {
      this.historyList = JSON.parse(historyCity);

      this.isHistory = true;
    }
    //获取定位城市

    if (this.currentId) {
      setStore("currentId", { currentId: this.currentId });
      currentcity(this.currentId).then((res) => {
        this.currentcityName = res.name;
        // console.log(res);
      });
    } else {
      let autoCity = JSON.parse(getStore("currentId"));
      if (autoCity) {
        this.currentId = autoCity.currentId;
        currentcity(this.currentId).then((res) => {
          this.currentcityName = res.name;
        });
      } else {
        // let geohash = JSON.parse(getStore("geohash"))
        this.currentcityName = this.$route.query.fromCity;
      }
    }
  },
  methods: {
    //切换城市
    switchCity() {
      this.$router.push("/home");
    },
    //点击提交 用节流功能
    tosearchCity: imageStabilization(function (cityId, cityName) {
      if (cityName) {
        searchplace(cityId, cityName).then((res) => {
          this.searchList = res;
          if (this.searchList && this.searchList.length > 0) {
            this.isSearchResult = true;
          }
          this.isHistory = false;
          this.isSearch = true;
        });
      }
    }, 2000),
    //输入框实时跟踪 用防抖功能
    toNewSearchCity: throttle(function (cityId, cityName) {
      if (cityName) {
        searchplace(cityId, cityName).then((res) => {
          this.searchList = res;
          if (this.searchList && this.searchList.length > 0) {
            this.isSearchResult = true;
          }
          this.isHistory = false;
          this.isSearch = true;
        });
      }
    }, 2000),

    // 跳转首页
    toMsite(cityItem) {
      //加入历史地址记录 本地缓存
      var historyCity = getStore("historycity");

      if (historyCity) {
        historyCity = JSON.parse(historyCity);
        var ishistory = false;
        historyCity.forEach((index, item) => {
          if (cityItem.id == item.id) {
            ishistory = true;
            return;
          }
        });
        if (!ishistory) {
          historyCity.push(cityItem);
        }
      } else {
        //转化为字符串
        historyCity = [];
        historyCity.push(cityItem);
      }

      setStore("historycity", historyCity);

      //路由跳转
      var geohash = cityItem.geohash;
      this.$router.push({ path: "/msite", query: { geohash } });
    },
    // toHistoryMsite(cityItem) {
    //   var geohash = this.cityItem;
    //   console.log("==");
    //   console.log(this.cityItem);
    //   this.$router.push({ path: "/msite", query: { geohash } });
    // },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.switch-city {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  @include sc(0.7rem, #fff);
}
.search {
  margin-top: 0.6rem;
  background: #fff;
  padding: 0.5rem 0.75rem;
}
.search-submit {
  margin-top: 0.4rem;
}

//搜索历史列表
.history-address {
  margin-top: 0.3rem;
}
.history-title {
  padding-left: 0.5rem;
  @include sc(0.475rem, #000);
  height: 1.2rem;
  line-height: 1.2rem;
}
.history-list {
  ul {
    border-top: 0.05rem solid $bc;
    li {
      display: block;
      padding: 0.5rem 0.7rem;
      border-bottom: 0.025rem solid $bc;
      background: #fff;
      .city-name {
        @include sc(0.65rem, #000);
      }
      .city-detail {
        margin-top: 0.3rem;
        @include sc(0.45rem, #888888);
      }
    }
  }
}
.search-list {
  @extend .history-list;
}
</style>
<style lang="scss">
.search-content {
  .el-input__inner {
    height: 1.45rem;
    line-height: 1.45rem;
    font-size: 0.6rem;
    border: 0.025rem solid #e4e4e4;
    border-radius: 0.08rem;
  }
  .el-input__inner:focus {
    border: 0.0025rem solid #e4e4e4;
  }
  .el-input__inner::placeholder {
    font-size: 0.6rem;
    color: #666666;
  }
  .el-input__inner::-webkit-input-placeholder {
    font-size: 0.6rem;
    color: #666666;
  }
  .el-input__inner::-moz-placeholder {
    font-size: 0.6rem;
    color: #666666;
  }
  .el-input__inner::-ms-input-placeholder {
    font-size: 0.6rem;
    color: #666666;
  }
}
.search {
  .el-button {
    width: 100%;
    height: 1.4rem;
    padding: 0;
    background: #3190e8;
    line-height: 1.4rem;
    border: 0.025rem solid #e4e4e4;
    span {
      font-size: 0.65rem;
      color: #fff;
    }
  }
  .el-button:focus {
    background: #3190e8;
    border: 0.025rem solid #e4e4e4;
  }
}
</style>
